<script>
import { loginCheck } from "@/api";
import { sliceArray } from "@/utils/index.js"
import ChangePwd from "@/components/ChangePwd"
import switchSiteJs from "@/mixins/switchSite.js"

export default {
  name: "swithSite",
  mixins: [switchSiteJs],
  components: {
    ChangePwd
  },
  data() {
    return {
      swiperOption: {
        direction: "horizontal",
        slidesPerView: "auto",
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      timer: "",
      lessSiteTypes: false
    };
  },
  watch: {
    "siteTypes.length": {
      immediate: true,
      handler() {
        this.newSiteTypes = this.siteTypes.map(item => {
          item.newSites = sliceArray(item.sites || [], 5)
          item.isSliceFlag = item.newSites.length > 1 ? true : false;
          return item
        })
      }
    }
  },
  methods: {
    showChangePwd() {
      this.$refs.changePwd.openChangePwd();
    },
    // 判断登录状态
    judgeLogin() {
      loginCheck().then((res) => {
        if (res.code) {
          this.$router.push({ name: `login` });
          // this.$router.push({ name: `${process.env.VUE_APP_FOLDER_NAME}Login` });
        } else {
          this.judgeSiteTypes();
          this.judgeSites();
        }
      });
    },
    // 跳转
    toWebsite(url, type = "") {
      this.jumpUrl(url, type);
    },
    logout() {
      this.handleLogout()
    },
    // 判断站点数量
    judgeSiteTypes() {
      this.siteTypesLength > 3
        ? (this.lessSiteTypes = false)
        : (this.lessSiteTypes = true);
    },
    // 判断子选项数量
    judgeSites() {
      this.newSiteTypes.forEach((val) => {
        this.$set(val, "isHover", false);
        if (val.sites.length === 1) {
          val.name = val.sites[0].projectName;
          this.$set(val, "isSiteManager", val.sites[0].isSiteManager);
          this.$set(val, "manageUrl", val.sites[0].manageUrl);
          this.$set(val, "tokenUrl", val.sites[0].tokenUrl);
        }
      });
    },
    // 显示子选项
    showBox(item) {
      clearTimeout(this.timer);
      this.newSiteTypes.forEach(val => {
        this.$set(val, "isHover", false);
      });
      this.$set(item, "isHover", true);
      if (item.sites.length === 1) {
        this.$set(item, "isHover", false);
      }
    },
    hideBox(item) {
      this.timer = setTimeout(() => {
        this.$set(item, "isHover", false);
      }, 500);
    },
    hideChildBox(item) {
      this.$set(item, "isHover", false);
    },
    renderHeader() {
      return (
        <div class="header">
          <div class="user-box">
            <div>
              <i class="header-bg-user"></i>
              <span on-click={this.showChangePwd}>
                {this.userInfo.userName}，欢迎您~
              </span>
            </div>
            {this.userInfo.isPlatformManager && this.userInfo.platformSite ? (
              <div>
                <i class="header-bg-setUp"></i>
                <span
                  on-click={this.toWebsite.bind(
                    this,
                    this.userInfo.platformSite.manageUrl || "",
                    "manager"
                  )}
                >
                  {this.userInfo.platformSite.projectName || ""}
                </span>
              </div>
            ) : (
              ""
            )}
            <div>
              <i class="header-bg-exit"></i>
              <span on-click={this.logout}>退出</span>
            </div>
          </div>
        </div>
      );
    },
    renderLi(item) {
      return (
        <li
          on-mouseenter={this.showBox.bind(this, item)}
          on-mouseleave={this.hideBox.bind(this, item)}
          class="li-class"
        >
          <div style="position:relative;">
            <div
              class="list-box"
              on-click={this.toWebsite.bind(this, item.tokenUrl)}
            >
              <i class="bg-siteLogo"></i>
              <span>{item.name}</span>
            </div>
            {item.isSiteManager ? (
              <i
                class="bg-SetUp-siteTypes"
                on-click={this.toWebsite.bind(this, item.manageUrl, "manager")}
              ></i>
            ) : (
              ""
            )}
          </div>
          {item.isHover ? this.renderHover(item) : ""}
        </li>
      );
    },
    renderSite(siteObj) {
      return <div class="site-obj">
          <div on-click={this.toWebsite.bind(this, siteObj.tokenUrl)}>
          <span>{siteObj.projectName}</span>
        </div>
        {
          siteObj.isSiteManager ? (<i class="bg-setUp-sites" on-click={this.toWebsite.bind(this, siteObj.manageUrl, "manager")}></i>) : ("")
        }
      </div>
    },
    renderHover(item) {
      return (
        <div
          class="children-box"
          on-mouseleave={this.hideChildBox.bind(this, item)}
        >
          <swiper options={this.swiperOption}>
            {this._l(item.newSites, (sItem) => {
              return (
                <swiper-slide class="swiper-slider">
                  {
                    this._l(sItem, siteObj => {
                      return this.renderSite(siteObj)
                    })
                  }
                </swiper-slide>
              )
            })
            }
          </swiper>
          {item.isSliceFlag ? <div class="swiper-button-prev swiper-button-arrow"></div> : ''}
          {item.isSliceFlag ? <div class="swiper-button-next swiper-button-arrow"></div> : ''}
        </div>
      );
    }
  },
  render() {
    return (
      <div class="bg-menu-xs">
        {this.renderHeader()}
        {this.siteTypesLength > 0 ? (
          <div class="main">
            <ul
              class={[this.lessSiteTypes ? "less-siteTypes" : "", "site-list"]}
            >
              {this._l(this.newSiteTypes, (item) => this.renderLi(item))}
            </ul>
          </div>
        ) : (
          ""
        )}
        <ChangePwd ref="changePwd"/>
      </div>
    );
  },
};
</script>

<style lang="scss">
.bg-menu-xs {
  left: 0;
  right: 0;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(~@/assets/images/bg-menu.png) no-repeat center center fixed;
  background-size: 100% 100%;
  .header {
    width: 100%;
    min-width: 1080px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    i {
      display: inline-block;
      background-image: url(~@/assets/images/xssprite_other.png);
      background-size: 598px 354px;
    }
    .user-box {
      margin-right: 10px;
      div {
        display: inline-block;
        .header-bg-exit {
          width: 20px;
          height: 20px;
          background-position: -561px -40px;
          margin-right: 10px;
        }
        .header-bg-user {
          @extend .header-bg-exit;
          width: 19px;
          background-position: -542px -40px;
        }
        .header-bg-setUp {
          @extend .header-bg-exit;
          height: 21px;
          background-position: -403px -60px;
        }
        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(122, 198, 250, 1);
          margin-right: 30px;
          cursor: pointer;
        }
      }
    }
  }
  .main {
    // width: 1080px;
    margin: 100px 240px 0;
    position: relative;
    i {
      display: inline-block;
      background-image: url(~@/assets/images/xssprite_other.png);
      background-size: 598px 354px;
    }
    .less-siteTypes {
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
    }
    .li-class {
      position: relative;
    }
    .site-list {
      // margin: 0 auto;
      // width: 940px;
      height: 350px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      align-content: flex-start;
      li {
        height: 147px;
        margin: 0 85px 140px 85px;
        cursor: pointer;
        .list-box {
          position: relative;
          background-image: url(~@/assets/images/xssprite_other.png);
          background-size: 598px 354px;
          width: 303px;
          height: 147px;
          background-position: -0px -147px;
          .bg-siteLogo {
            position: absolute;
            width: 40px;
            height: 40px;
            background-position: -542px -0px;
            margin: 30px 0 0 28px;
          }
          span {
            width: 100%;
            display: inline-block;
            margin-top: 52px;
            text-align: center;
            line-height: 95px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(122, 198, 250, 1);
          }
          &:hover {
            background-position: -0px -0px;
            .bg-siteLogo {
              background-position: -363px -60px;
            }
            span {
              color: rgba(255, 255, 255, 1);
            }
          }
        }
        .bg-SetUp-siteTypes {
          width: 20px;
          height: 21px;
          background-position: -443px -60px;
          position: absolute;
          top: 127px;
          right: -10px;
          &:hover {
            background-position: -423px -60px;
          }
        }
      }
    }
    .children-box {
      position: absolute;
      left: -300px;
      width: 900px;
      height: 100px;
      background: url(~@/assets/images/childbg.png);
      margin: 30px auto;
      .swiper-slider {
        width: inherit;
        height: inherit;
        display: flex;
        .site-obj {
          width: 120px;
          height: 60px;
          position: relative;
          margin: 20px 30px;
          div {
            cursor: pointer;
            display: inline-block;
            background-image: url(~@/assets/images/xssprite_other.png);
            background-size: 598px 354px;
            width: 120px;
            height: 60px;
            background-position: -302px -0px;
            line-height: 60px;
            text-align: center;
            span {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(160, 207, 255, 1);
            }
            &:hover {
              background-position: -422px -0px;
              span {
                color: rgba(255, 255, 255, 1);
              }
            }
          }
          .bg-setUp-sites {
            width: 16px;
            height: 16px;
            background-position: -582px -0px;
            background-size: 598px 354px;
            position: absolute;
            bottom: 0;
            right: -8px;
            &:hover {
              background-position: -582px -16px;
              background-size: 598px 354px;
            }
          }
        }
      }
      .swiper-button-prev {
        left: 5px !important;
      }
      .swiper-button-next {
        right: 5px !important;
      }
      .swiper-button-arrow {
        --swiper-theme-color: #0ef7fe !important;
      }
      .display-none {
        display: none;
      }
    }
  }
}
</style>
